<template>
  <!-- 校历页面 -->
  <div class="app-container">
    <!-- 搜索 -->
    <searchForm
      :formOptions="formOptions"
      @onReset="onReset"
      :formLabelWidth="formLabelWidth"
      @onSearch="onSearch"
      v-show="showSearch"
    />
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['basic:schooledate:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['basic:schooledate:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['basic:schooledate:remove']"
          >删除</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      v-loading="loading"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        prop="yearName"
        label="年级"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="学年"
        align="center"
      ></el-table-column>
      <el-table-column prop="termName" label="学期" align="center">
        <template slot-scope="scope">
          <span style="display: flex; justify-content: center"
            ><dict-tag
              :options="dict.type.basic_term_type"
              :value="scope.row.termName"
            ></dict-tag
          ></span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="name" label="学生类别"></el-table-column> -->
      <el-table-column
        prop="termStart"
        label="学期开始日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="termEnd"
        label="学期结束日期"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="totalWeek"
        label="总周数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="learnTotalWeek"
        label="教学总周数"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="courseMorning"
        label="上午几节"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="courseNoon"
        label="下午几节"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="courseNight"
        label="晚上几节"
        align="center"
      ></el-table-column>
      <el-table-column prop="status" label="是否使用" align="center">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_normal_disable"
            :value="scope.row.status"
          ></dict-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['basic:schooledate:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['basic:schooledate:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 校历添加或修改 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="60%"
      @close="$refs['form'].resetFields()"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="年级" prop="gradeId">
              <!-- <yearTime @input="timeDate" :value="amcYear"></yearTime> -->
              <el-select v-model="form.gradeId" placeholder="请选择" clearable style="width: 100%">
                <el-option
                v-for="dict in gradeList"
                  :key="dict.VALUE"
                  :label="dict.TITILE"
                  :value="dict.VALUE"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学年" prop="name">
              <yearTime @input="timeDate" :value="amcYear"></yearTime>
              <!-- <el-select v-model="form.gradeId" placeholder="请选择" clearable style="width: 100%">
                <el-option
                v-for="dict in gradeList"
                  :key="dict.VALUE"
                  :label="dict.TITILE"
                  :value="dict.VALUE"
                ></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学期" prop="termName">
              <el-select
                v-model="form.termName"
                placeholder="请选择学期"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="dict in dict.type.basic_term_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="学生类别" prop="studentType">
              <el-select v-model="form.studentType" placeholder="请选择学生类别" style="width: 100%">
                <el-option
                  v-for="dict in dict.type.bc_student_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item label="学期开始日期" prop="termStart">
              <el-date-picker
                v-model="form.termStart"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学期结束日期" prop="termEnd">
              <el-date-picker
                v-model="form.termEnd"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总周次" prop="totalWeek">
              <el-input
                v-model="form.totalWeek"
                placeholder="请输入总周次"
                maxlength="3"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="教学总周次" prop="learnTotalWeek">
              <el-input
                v-model="form.learnTotalWeek"
                placeholder="请输入教学总周次"
                maxlength="3"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上午几节课" prop="courseMorning">
              <el-input
                v-model="form.courseMorning"
                placeholder="请输入上午几节课"
                maxlength="2"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下午几节课" prop="courseNoon">
              <el-input
                v-model="form.courseNoon"
                placeholder="请输入下午几节课"
                maxlength="2"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="晚上几节课" prop="courseNight">
              <el-input
                v-model="form.courseNight"
                placeholder="请输入晚上几节课"
                maxlength="2"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否使用" prop="status">
              <el-select
                v-model="form.status"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in dict.type.sys_normal_disable"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGradeSelect } from "@/api/information/gradeInfor";
import searchForm from "@/components/Search/searchForm.vue";
import yearTime from "../components/time/yearTime.vue";
import {
  schooledateList,
  addSchooledate,
  updataSchooledate,
  schooledateInfor,
  delSchooledate,
} from "@/api/information/schoolCalendar";
export default {
  components: { searchForm, yearTime },
  dicts: [
    "sys_normal_disable",
    "basic_term_type", // 学期类型
    "bc_student_type", // 学生类型
  ],
  data() {
    return {
      // 选中数组
      ids: [],
      name: [],
      value1: [],
      loading: true,
      // 非单个禁用
      single: true,
      multiple: true,
      showSearch: true,
      formLabelWidth: "80px",
      formOptions: [
        {
          label: "学年",
          prop: "yearName",
          element: "el-input",
          placeholder: '请输入学年'
        },
        // {
        //   label: "学生类别",
        //   prop: "type",
        //   element: "el-select",
        //   options: [
        //     { label: "给点意见", value: "1" },
        //     { label: "售后问题", value: "2" }
        //   ],
        //   placeholder: "请选择学生类别"
        // }
      ],
      tableData: [],
      amcYear:[],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      title: "",
      // 修改或添加弹窗
      open: false,
      form: {},
      gradeList: [],
      rules: {
        name: [{ required: true, message: "请选择学年", trigger: "change" }],
        gradeId: [{ required: true, message: "请选择年级", trigger: "change" }],
        termName: [
          { required: true, message: "请选择学期", trigger: "change" },
        ],
        termStart: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        termEnd: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        totalWeek: [
          { required: true, message: "总周次不能为空", trigger: "blur" },
        ],
        learnTotalWeek: [
          { required: true, message: "教学总周次不能为空", trigger: "blur" },
        ],
        courseMorning: [
          { required: true, message: "课时不能为空", trigger: "blur" },
        ],
        courseNoon: [
          { required: true, message: "课时不能为空", trigger: "blur" },
        ],
        courseNight: [
          { required: true, message: "课时不能为空", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择是否使用", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    timeDate(data) {
  
      let result = data[0] + "~" + data[1];
      this.form.name = result
      console.log(data,result, "时间年");
    },
    // 获取搜索表单提交的数据
    onSearch(val) {
      // 查询条件和分页数据合并
      this.queryParams = Object.assign(this.queryParams, val);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    onReset(data) {
      this.queryParams = Object.assign(this.queryParams, data);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.name = selection.map((item) => item.name);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      schooledateList(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.loading = false;
        this.total = response.total;
      });
    },
    // 获取年级下拉树
    async getGradeList() {
      let res = await getGradeSelect();
      console.log(res);
      this.gradeList = res.data;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true;
      this.title = "校历添加";
      this.getGradeList();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const roleIds = row.id || this.ids;
      this.name = row.yearName || this.name;
      this.$modal
        .confirm('是否确认删除学年为"' + this.name + '"的数据项？')
        .then(function () {
          return delSchooledate(roleIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const roleId = row.id || this.ids;
      this.getGradeList();
      schooledateInfor(roleId).then((response) => {
        this.form = response.data;
        this.amcYear = response.data.name.split("~").map(Number);
        this.open = true;
        this.title = "校历修改";
      });
    },
    // 提交新增或修改的数据
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            updataSchooledate(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSchooledate(this.form).then((response) => {
              console.log(response, "新增成功");
              this.$modal.msgSuccess("新增成功");
              this.form = {};
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  },
};
</script>

<style>
</style>